import React, { useState, useEffect } from 'react'
import { Layout, Menu, theme, Avatar, Dropdown } from 'antd';
import NewRouter from "../components/sandbox/newRouter/NewRouter"
import axios from 'axios';
import { deciphering, encryption } from '../util/Util.js';
import { connect } from "react-redux"
import {
  UserOutlined,
  DatabaseOutlined,
} from '@ant-design/icons';
import './NewSandBox.css'
import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
const { Header, Content, Sider } = Layout;
function NewsSandBox(props) {
  const [height, setHeight] = useState(0);
  const [userInfo, setUserInfo] = useState({})
  const [openkey, setOpenkey] = useState([])
  var roleList = ["系统管理员", "管理员", "用户"]
  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    setHeight(h);
  };

  const [pathUrl, setPathUrl] = useState(props.location.pathname === "/" ? "/question/question" : props.location.pathname)

  useEffect(() => {
    var pathList = props.location.pathname.split("/")
    setOpenkey(["/" + pathList[1]])
    setPathUrl(props.location.pathname)

    var info = JSON.parse(deciphering(localStorage.getItem("userInfo")))

    setUserInfo(info)

    // 页面刚加载完成后获取浏览器窗口的大小

    let h = window.innerHeight;
    setHeight(h)

    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }

  }, [props]);
  function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  const items = [

    getItem('训练题库管理', '/question/train', <DatabaseOutlined />),

  ];

  const dropdownList = [
    {
      key: '1',
      label: "退出登录",
      danger: true,
      onClick: () => { outLogin() }
    },

  ];
  const outLogin = () => {
    var info = JSON.parse(deciphering(localStorage.getItem("userInfo")))
    localStorage.clear();

    document.cookie = info.tokenname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    props.history.push("/login")
  }
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const menuClick = (e) => {
    props.history.push(e.key)
    setPathUrl(e.key)
  }
  const openChange = (openKeys) => {
    setOpenkey(openKeys)
  }
  return (

    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider style={{ backgroundColor: "black", textAlign: "left" }}>
        <div style={{ padding: "15px 0", color: "white", textAlign: "center", fontSize: "22px" }} >
          训练服务系统
        </div>
        <Menu theme="dark" openKeys={openkey} onOpenChange={(openKeys) => openChange(openKeys)} selectedKeys={pathUrl} mode="inline" items={items} onClick={(e) => menuClick(e)} style={{ backgroundColor: "black", fontSize: "12px", }} />
      </Sider>
      <Layout style={{ background: "#f5f4f4" }}>
        <Header
          style={{
            padding: "0",
            background: colorBgContainer,
          }}
        >
          <div style={{ display: "flex" }}>
            <div style={{ flex: "1 1 200px", padding: "0 20px" }}>{roleList[userInfo.role]}</div>
            <div style={{ flex: "1 1 200px", textAlign: "right", padding: "0 20px" }}>
              <Dropdown
                menu={{ items: dropdownList }}
                placement="bottom"
              >
                <span style={{ cursor: "pointer", padding: "10px" }}><Avatar icon={<UserOutlined />} style={{ marginRight: "10px" }} />{userInfo.username}</span>
              </Dropdown>

            </div>
          </div>


        </Header>
        <Content style={{ position: 'relative' }}>
          <div
            style={{
              // padding: "0 0 20px 0",
              // background: colorBgContainer,
              borderRadius: "5px",
              // height: document.documentElement.clientHeight - 140,
              margin: '15px 15px 0 15px',
            }}
          >
            <NewRouter />
          </div>
        </Content>

      </Layout>
    </Layout >
  )
}

export default withRouter(NewsSandBox)
